<template>
	<view class="container">
		<my-tab :list="list1" :current="currentIndex" @itemClick='itemClick'></my-tab>
		<!-- 页面一 -->
		<view class="order_body">
			<view v-if="orderlist.length>0">
				<view class="brder_body_for" v-for="(item, index) in orderlist" :key="index">
					<view class="order_body_top">
						<text class="order_text1">订单编号:{{item.order_sn}}</text>
						<text class="order_text2">{{item.status_text}}</text>
					</view>
					<view class="order_body_center_container">
						<view class="order_body_center" v-for="(itm,gindex) in item.order_goods" :key="gindex"
							@tap='jump(`/pages/center/order/orderdetail`,item.order_id)'>
							<image :src="itm.goods_img"></image>
							<view class="order_body_center_right">
								<text class="u-line-1 order_body_center_right_text1">{{itm.goods_name}}</text>
								<view class="order_body_center_right_text2" v-if="itm.item_name">
									<text>{{itm.item_name}}</text>
								</view>
								<view class="order_body_bet">
									<view class="">
										<text class="order_body_bet_text1">￥</text>
										<text class="order_body_bet_text2">{{itm.goods_price}}</text>
									</view>
									<text class="order_body_bet_text3">x{{itm.goods_num}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="order_body_bot">
						<text class="order_body_bot_text1">共{{item.goods_all_num}}件商品 共计</text>
						<text class="order_body_bot_text2">￥</text>
						<text class="order_body_bot_text3">{{item.order_amount}}</text>
					</view>
					<view class="order_body_bottom">
						<view class="order_body_bottom_bg1 bottom_bg" @tap='jump(`/pages/center/order/orderdetail`,item.order_id)'>
							查看订单
						</view>
						<view v-if='item.order_status==-1' class="order_body_bottom_bg1 bottom_bg"
							@click="cancel(item.order_id,index)">
							取消订单
						</view>
						<view v-if='item.order_status==-1' class="order_body_bottom_bg2 bottom_bg"
							@click="payment(item)">
							立即支付
						</view>
						<view v-if='false' class="order_body_bottom_bg1 bottom_bg"
							@click="Confirm(item.order_id)">
							再次购买
						</view>
						<view class="order_body_bottom_bg2 bottom_bg" @tap="openConfirm(item.order_id,index)" v-if='item.order_status == 2'>
							确认收货
						</view>
						<view class="order_body_bottom_bg2 bottom_bg" @click="pingjito" v-if='false'>
							去评价
						</view>
					</view>
				</view>
				<view class="bottom">
					没有更多了
				</view>
			</view>
			<u-empty text="暂无相关订单" :icon="emptyIcon" v-else>
				<button @tap='goIndex' size="mini" class="chooseBtn">去逛逛</button>
			</u-empty>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="5"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认收货？</text>
				<view class="u-popup-slot_flex">
					<button @click="show = !show" class="cancel">取消</button>
					<button @click="Confirm()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="cancel_show" round="5"
			:overlay="true" :customStyle="customStyle1" @close="cancel_show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认取消？</text>
				<view class="u-popup-slot_flex">
					<button @click="cancel_show = !cancel_show" class="cancel">取消</button>
					<button @click="CancleOrder()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {baseUrl} from "../../config/config";

	var _this;
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待支付',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}],
				customStyle1: {
					'width': '80%'
				},
				cancel_show: false,
				cancel_id: 0,
				cancel_index: -1,
				show: false,
				emptyIcon:baseUrl+'/empty/order.png',
				goodslist: [],
				orderlist: [],
				page: 1,
				num: 1,
				b_num: 1,
				bottom: 0,
				order_id:0,
				index:-1,
				currentIndex: '0',
				status: '0',
				hasMore: true
			}
		},
		onLoad(option) {
			_this=this
			if (option.status != undefined) {
				this.status = option.status
				this.currentIndex = option.status
			}
			this.orderList();
		},
		//触底事件
		onReachBottom() {
			if (this.hasMore) {
				this.page++
				this.orderList()
			}
		},
		methods: {
			//点击取消按钮
			cancel(oid,index){
				this.cancel_id=oid
				this.cancel_index=index
				this.cancel_show=true
			},
			//点击去逛逛
			goIndex(){
				this.$u.route({
					url: "pages/index/index",
					type: "switchTab"
				})
			},
			itemClick(index) {
				this.status = index
				this.page = 1
				this.orderlist = []
				this.orderList()
			},
			//获取订单列表
			async orderList() {
				if (this.status > 0) {
					var params = {
						pageIndex: this.page,
						pageSize: 20,
						status: this.status
					}
				} else {
					var params = {
						pageIndex: this.page,
						pageSize: 20
					}
				}
				const data = await _this.$post('api/OrderList',params)
				this.orderlist.push(...data.data.order)
				this.hasMore = data.data.order.length >= 20
			},
			// 跳转到个人信息页面
			centerto() {
				this.$u.route({
					url: "pages/center/center",
					type: "reLaunch"
				})
			},
			//跳转到评价
			pingjito() {
				this.$u.route({
					url: "pages/center/order/evaluate",
					type: "reLaunch"
				})
			},
			//路由跳转
			jump(url, id) {
				this.$u.route({
					url,
					params: {
						id
					}
				})
			},
			// 支付
			async payment(item) {
				let openid=uni.getStorageSync('openid') || 'o4RE35WBIPcCtRZDphyMwBozNK80'
				let form={
					order_id:item.order_id,
					is_zhifu:1,
					openid
				}
				const data = await _this.$post('api/OrderDetail',form)
				if(data.code==50){
					//唤起微信支付
					uni.requestPayment({
					    provider: 'wxpay',
						timeStamp: data.data.result.timeStamp+'',
						nonceStr: data.data.result.nonceStr,
						package: data.data.result.package,
						signType: data.data.result.signType,
						paySign: data.data.result.sign,
						success: function (res) {
							_this.$u.toast('支付成功')
							item.order_status=1
							item.status_text='待发货'
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}else{
					uni.$u.toast(data.msg)
				}
			},
			openConfirm(order_id,index){
				this.order_id=order_id
				this.index=index
				this.show=true
			},
			//取消订单
			async CancleOrder() {
				const params = {
					id: this.cancel_id
				}
				//发送请求
				const data = await _this.$post('api/CancelOrder',params)
				if(data.code==200){
					uni.$u.toast(data.msg)
					this.orderlist.splice(this.cancel_index,1)
					this.cancel_show=false
				}else{
					uni.$u.toast(data.msg)
				}
			},
			//确认收货
			async Confirm() {
				const params = {
					id: this.order_id,
				}
				//发送请求
				const data = await _this.$post('api/OrderConfirm',params)
				if(data.code==200){
					this.orderlist[this.index]['order_status']=3
					this.orderlist[this.index]['status_text']='已完成'
					uni.$u.toast(data.msg)
					this.show=false
				}else{
					uni.$u.toast(data.msg)
				}
			},
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.container {}

	.order_search {
		padding: 20rpx;
		display: flex;

		.u-search {
			flex: 1;
		}

		image {
			width: 17rpx;
			height: 29rpx;
			margin-top: 18rpx;
			margin-right: 20rpx;
		}
	}

	.order_body {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.brder_body_for {
		margin-bottom: 20rpx;
		border-radius: 10px;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		box-shadow: $global-shade;

		.order_body_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70rpx;

			.order_text1 {
			}

			.order_text2 {
				color: $theme-color;
			}
		}

		.order_body_center_container {
			.order_body_center {
				display: flex;
				padding: 20rpx 0;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}

				.order_body_center_right {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 10rpx 0;
					.order_body_center_right_text1 {
						font-size: 28rpx;
						color: #1D1d1d;
					}

					.order_body_center_right_text2 {
						color: #BCBCBC;

						text {
							background-color: #F6F7FB;
							padding: 4rpx 15rpx;
							display: inline-block;
							border-radius: 20rpx;
						}
					}

					.order_body_bet {
						display: flex;
						justify-content: space-between;

						.order_body_bet_text1 {
							font-size: 24rpx;
							color: #525252;
						}

						.order_body_bet_text2 {
							font-size: 32rpx;
							color: #525252;
						}

						.order_body_bet_text3 {
							font-size: 26rpx;
							color: #BCBCBC;
						}
					}
				}
			}
		}

		.order_body_bot {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.order_body_bot_text1 {
				font-size: 26rpx;
			}

			.order_body_bot_text2 {
				font-size: 26rpx;
			}

			.order_body_bot_text3 {
				font-size: 32rpx;
			}
		}

		.order_body_bottom {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 10rpx;

			.bottom_bg {
				width: 128rpx;
				font-size: 26rpx;
				padding: 2rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;

				&:not(:last-child) {
					margin-right: 20rpx;
				}
			}

			.order_body_bottom_bg1 {
				color: #525252;
				border: 1px solid #999;
				border-radius: 21rpx;
			}

			.order_body_bottom_bg2 {
				color: #fff;
				border: 1px solid $theme-color;
				background-color: $theme-color;
				border-radius: 21rpx;
			}
		}
	}

	.bottom {
		width: 90%;
		margin: 0 auto;
		font-size: 28rpx;
		text-align: center;
		color: #525252;
		margin-top: 20rpx;
	}

	.goods_list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.goods_list_img1 {
		width: 100rpx;
		height: 100rpx;
		margin-top: 200rpx;
	}

	.goods_list_text1 {
		color: #999999;
		font-size: 24rpx;
		margin-top: 40rpx;
	}

	.goods_list_bg {
		color: #FF2C5F;
		border: 1px solid #FF2C5F;
		padding: 6rpx 50rpx;
		border-radius: 20px;
		margin-top: 40rpx;
		font-size: 28rpx;
	}
	.chooseBtn{
		margin-top: 20rpx;
		background: $theme-color;
		color: #fff;
	}
</style>
